<script setup>
import { ref } from 'vue'
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

const userInfo = ref({...userInfoStore.info})
const userPwd = ref({
  password: '',
  newpassword: '',
  rePassword: ''
})
const rules = {
  // password: [
  //     { required: true, message: '请输入原密码', trigger: 'blur' },
  //     {
  //       pattern: /^\S{5,16}$/,
  //       message: '密码必须是5-16位的非空字符串',
  //       trigger: 'blur'
  //     }
  // ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z]).*$/,
      message: '密码必须包含大写字母和小写字母',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*[\d\W_]).*$/,
      message: '密码必须包含数字或特殊符号',
      trigger: 'blur'
    },
    {
      pattern: /^.{8,}$/,
      message: '密码长度必须大于等于8位',
      trigger: 'blur'
    }
  ],
  // newpassword: [
  //     { required: true, message: '请输入新密码', trigger: 'blur' },
  //   {
  //     pattern: /^\S{5,16}$/,
  //     message: '密码必须是5-6位的非空字符串',
  //     trigger: 'blur'
  //   }
  // ],
  newpassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z]).*$/,
      message: '密码必须包含大写字母和小写字母',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*[\d\W_]).*$/,
      message: '密码必须包含数字或特殊符号',
      trigger: 'blur'
    },
    {
      pattern: /^.{8,}$/,
      message: '密码长度必须大于等于8位',
      trigger: 'blur'
    }
  ],
  rePassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== userPwd.value.newpassword) {
          return callback(new Error('两次密码不一致'))
        }
        callback()
      },
      trigger: 'blur'
    }
  ]
}

//修改个人信息
import { userPasswordUpdateService} from '@/api/admin/user.js'
import {ElMessage} from 'element-plus'
import router from "@/router/index.js";
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();

const formRef = ref(null)

const updatePwd = async () => {
  if (!formRef.value) return
  formRef.value.validate(async (valid) => {
    if (valid) {
      // 表单验证通过，可以提交
      try {
        // 调用接口更新密码
        const result = await userPasswordUpdateService(userPwd.value)
        if (result.message === '操作成功'){
          tokenStore.removeToken()
          userInfoStore.removeInfo()
          //2.跳转到登录页面
          await router.push('/')
          ElMessage.success(result.message)
          ElMessage({
            type: 'error',
            message: '请重新登录',
          })
        }else {
          ElMessage.error(result.message)
        }
      } catch (error) {
        ElMessage.error('修改失败，请稍后再试')
      }
    } else {
      // 表单验证不通过，阻止提交
      ElMessage.error('请检查表单输入')
    }
  })
}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>重置密码</span>
      </div>
    </template>
    <el-row style="margin-top: 30px;margin-left: 10px">
      <el-col :span="10">
        <el-form :model="userPwd" :rules="rules" ref="formRef" label-width="100px" size="large">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="原密码" prop="password">
            <el-input v-model="userPwd.password" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpassword">
            <el-input v-model="userPwd.newpassword" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="确定密码" prop="rePassword">
            <el-input v-model="userPwd.rePassword" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePwd">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <img src="@/assets/images/repassword.png" style="float: right;width: 500px">
    </el-row>
  </el-card>
</template>
